<template>
  <section>
    <el-button type="text"
               @click="handleClick">{{title}}</el-button>
    <OrderDeviceLoader v-if="isLoader"
                       :orderId="orderId" />
  </section>
</template>

<script>
import OrderDeviceLoader from "@/components/basic/OrderDeviceLoader.vue"
import axios from 'axios'
import _ from 'lodash'
import { mapState } from "vuex";
export default {
  name: "OrderDeviceRefresh",
  components: {
    OrderDeviceLoader
  },
  inject: ["$table"],
  props: {
    record: {
      type: Object,
      default: () => { }
    },
    url: {
      type: String,
      default: null
    },
    // 按钮名称
    title: String
  },
  data () {
    return {
      isLoader: false
    }
  },
  computed: {
    ...mapState({
      deviceTraces: (state) => state.deviceTrace.deviceTraces
    }),
    orderId () {
      return this.record.orderId
    }
  },
  methods: {
    handleClick: _.debounce(function () {    // 触发事件
      this.$confirm("确认刷新？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.refresh();
      });
    }, 600),
    async refresh () {
      this.isLoader = false;
      let params = { orderId: this.orderId };
      let response = await axios.get(this.url, { params });
      if (response.code === 0 && response.data) {
        // window.location.reload()
        delete this.deviceTraces[this.orderId]
        this.$store.commit("deviceTrace/CHANGEDEVICETRACE", this.deviceTraces);
        this.isLoader = true;
        this.$table.search();
      } else {
        this.$message({ type: "error", message: response.message });
      }
    }
  }
}
</script>
<style scoped lang="scss">
.arrow {
  color: var(--prev-color-text-regular);
  font-size: 13px;
  padding: 0;
}
</style>